<template>
  <div class="love-talk">
    <button @click="getLoveTalk">获得一句情话</button>
    <ul>
      <li v-for="talk in talkList" :key="talk.id">{{ talk.text }}</li>
    </ul>
  </div>
</template>
<script lang="ts" setup name="LoveTalk">
  import { reactive } from 'vue'
  import axios from 'axios'
  import { v4 as uuid } from 'uuid'
  import { useLoveTalkListStore } from '@/store/loveTalkList'
  import { storeToRefs } from 'pinia'

  const loveTalkStore = useLoveTalkListStore()
  const { talkList } = storeToRefs(loveTalkStore)

  //   interface loveTalk {
  //     id: string
  //     content: string
  //   }

  // let talks = reactive<Array<loveTalk>>([
  //     { id: '1', content: '你今天有点怪，怪好看的' },
  //     { id: '2', content: '我能陪你熬夜也会劝你早睡。' },
  //     { id: '3', content: '爱你在我心窝窝里~' },
  // ])

  // async function getTalk() {
  //     await axios.get('https://api.uomg.com/api/rand.qinghua?format=json').then((res: any) => {
  //         talkList.push({ id: res.data.code, content: res.data.content })
  //     })
  // }
  //   async function getTalk() {
  //     //连续解构 重命名赋值
  //     let {
  //       data: { content },
  //     } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
  //     let obj = { id: uuid(), content:content }
  //     talkList.unshift(obj)
  //   }

  loveTalkStore.$subscribe((mutate,state)=>{
     localStorage.setItem('loveTalk',JSON.stringify(state.talkList))
  })

  function getLoveTalk() {
    loveTalkStore.getATalk()
  }
</script>

<style scoped>
  .love-talk {
    background-color: #ff9800; /* 更柔和的橙色 */
    padding: 20px;
    border-radius: 15px; /* 更大的圆角 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 更明显的阴影 */
    text-align: center; /* 内容居中 */
    font-family: 'Roboto', sans-serif; /* 字体样式 */
    height: 100%;
  }

  button {
    margin: 10px 0;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    background-color: #fff;
    color: #ff9800;
    font-weight: bold; /* 加粗字体 */
    cursor: pointer;
    transition: all 0.3s ease;
  }

  button:hover {
    background-color: #ffe0b2;
    color: #ff9800;
  }

  ul {
    list-style: none;
    padding: 0;
  }

  li {
    margin: 10px 0;
    font-size: 16px;
    color: #fff;
  }
</style>
